{% extends '_base.html' %}

{% block title %}个人中心{% endblock %}

{% block content %}
    {% include 'account/components/profile_header.html' %}

    {# Breadcrumb #}
    <nav class="flex py-4 px-4 lg:px-0" aria-label="Breadcrumb" id="profile-breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
            <li class="inline-flex items-center">
                <a href="{% url 'djs_guide:index' %}"
                   class="inline-flex gap-1 items-center text-sm font-medium text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                    <i class="fa-solid fa-house-chimney"></i>
                    主页
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fa-solid fa-chevron-right"></i>
                    <a href="{% url 'account:index' %}"
                       class="ms-1 text-sm font-medium text-gray-600 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white">
                        个人中心
                    </a>
                </div>
            </li>
            <li aria-current="page">
                <div class="flex items-center">
                    <i class="fa-solid fa-chevron-right"></i>
                    <span class="ms-1 text-sm font-medium text-amber-700 md:ms-2 dark:text-gray-400">
                        {% block breadcrumb_title %}{% endblock %}
                    </span>
                </div>
            </li>
        </ol>
    </nav>

    <div class="md:flex px-4 lg:px-0">
        <ul class="md:w-64 lg:w-96 flex-column space-y space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0">
            <li>
                {% url 'account:profile' as profile_url %}
                {% if request.path == profile_url %}
                    <button type="button"
                            class="inline-flex gap-2 items-center px-4 py-3 text-white bg-blue-700 rounded-lg active w-full dark:bg-blue-600"
                            aria-current="page">
                        <i class="fa-solid fa-circle-user text-white text-2xl"></i>
                        个人资料
                    </button>
                {% else %}
                    <a href="{{ profile_url }}#profile-breadcrumb"
                       class="inline-flex gap-2 items-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-100 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white">
                        <i class="fa-solid fa-circle-user text-gray-500 dark:text-gray-400 text-2xl"></i>
                        个人资料
                    </a>
                {% endif %}
            </li>
            <li>
                {% url 'account:dashboard' as dashboard_url %}
                {% if request.path == dashboard_url %}
                    <button type="button"
                            class="inline-flex gap-2 items-center px-4 py-3 text-white bg-blue-700 rounded-lg active w-full dark:bg-blue-600"
                            aria-current="page">
                        <i class="fa-solid fa-grip text-white text-2xl"></i>
                        控制台
                    </button>
                {% else %}
                    <a href="{{ dashboard_url }}#profile-breadcrumb"
                       class="inline-flex gap-2 items-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-100 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white">
                        <i class="fa-solid fa-grip text-gray-500 dark:text-gray-400 text-2xl"></i>
                        控制台
                    </a>
                {% endif %}
            </li>
            <li>
                {% url 'account:settings' as settings_url %}
                {% if request.path == settings_url %}
                    <button type="button"
                            class="inline-flex gap-2 items-center px-4 py-3 text-white bg-blue-700 rounded-lg active w-full dark:bg-blue-600"
                            aria-current="page">
                        <i class="fa-solid fa-gear text-white text-2xl"></i>
                        设置
                    </button>
                {% else %}
                    <a href="{{ settings_url }}#profile-breadcrumb"
                       class="inline-flex gap-2 items-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-100 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white">
                        <i class="fa-solid fa-gear text-gray-500 dark:text-gray-400 text-2xl"></i>
                        设置
                    </a>
                {% endif %}
            </li>
            <li>
                {% url 'account:charge' as charge_url %}
                {% if request.path == charge_url %}
                    <button type="button"
                            class="inline-flex gap-2 items-center px-4 py-3 text-white bg-blue-700 rounded-lg active w-full dark:bg-blue-600"
                            aria-current="page">
                        <i class="fa-solid fa-bolt text-white text-2xl"></i>
                        充电
                    </button>
                {% else %}
                    <a href="{{ charge_url }}#profile-breadcrumb"
                       class="inline-flex gap-2 items-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-100 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white">
                        <i class="fa-solid fa-bolt text-gray-500 dark:text-gray-400 text-2xl"></i>
                        充电
                    </a>
                {% endif %}
            </li>
            <li>
                <a class="inline-flex gap-2 items-center px-4 py-3 text-gray-400 rounded-lg cursor-not-allowed bg-gray-50 w-full dark:bg-gray-800 dark:text-gray-500">
                    <i class="fa-solid fa-circle-xmark text-gray-400 dark:text-gray-500 text-2xl"></i>
                    隐藏功能
                </a>
            </li>
        </ul>
        <div class="p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full">
            {% block sub_content %}{% endblock %}
        </div>
    </div>
{% endblock %}